<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-05 11:00:49
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-09-15 09:28:51
-->
<template>
  <Drawer
    :with-header="false"
    @open="init"
  >
    <el-scrollbar
      v-loading="isLoading"
      max-height="100%"
    >
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          label="originalValue"
          prop="originalValue"
        />
        <el-table-column
          label="newValue"
          prop="newValue"
        />
        <el-table-column
          label="propertyName"
          prop="propertyName"
          width="140"
        />
        <el-table-column
          label="propertyTypeFullName"
          prop="propertyTypeFullName"
          width="180"
        />
      </el-table>
    </el-scrollbar>
  </Drawer>
</template>

<script lang="ts" setup>
import Drawer from '@/components/Drawer/index.vue'
import { getEntityChange } from '@/http/entityChangeLog'
import { IPropertyChange } from '@/http/types/entityChangeLog'
import { ref } from 'vue'

const props = defineProps({
  entityChangeId: {
    type: String,
    default: ''
  }
})

const isLoading = ref(false)
const tableData = ref<IPropertyChange[]>([])

const init = async () => {
  const res = await getEntityChange(props.entityChangeId)
  tableData.value = res.entityChange.propertyChanges
}
</script>

<style lang="scss" scoped>
</style>
